<template>
    <view>
        <view class="tips">最多 上传{{limit}}张图片 <text>{{imgs.length}}/{{limit}}</text> </view>
   
        <view class="imglist" :style="'width:'+imgWidth">
        
            <ljs-dragImages
                v-if="showbbss"
                :count="limit"
                v-model="imgs"
                :colCount="colCount"
                :imgHeight="imgHeight"
                @input="upload"
                        >
            </ljs-dragImages>
           
        </view>
    </view>
</template>

<script>
    export default{
        props:{
            imgWidth:{
                type:String,
                default:"500rpx"
            },
            limit:{
                type:Number,
                default:1
            },
            images:{
                type:Array,
                default:[]
            },
            colCount:{
                type:Number,
                default:3
            },
            imgHeight:{
                type:Number,
                default:165
            }
        },
        data(){
            return{
                imgs:[],
                value:[],
                showbbss:false,
                contents:[]
            }
        },
        watch:{
            images: {
            	handler(n) {
                    console.log('走这里3')
                   if(this.images.length>=1){
                      var bbss = JSON.parse(JSON.stringify(this.images))
                      var newbbss = []
                      bbss.forEach(function(val,index){
                          var item = {}
                          item.x = 0;
                          item.y = 0;
                          item.oldx = 0;
                          item.oldy = 0;
                          item.zIndex = 1; // 层级
                          item.sort = index; // 排序
                          item.opacity = 1; // 透明
                          item.moveEnd = false; // 是否进入拖拽
                          item.url = val
                          newbbss.push(item)
                      })
                                   
                      // this.value = newbbss
                           
                      this.imgs = newbbss 
                          console.log(this.imgs)
                      this.showbbss = true
                   }else{
               
                       this.showbbss = true
                   }
            	},
            	deep: true
            },
            "limit":function(n){
                console.log('走这里2')
                if(this.images.length<=0){
                    this.showbbss = true
                }
            }
          
        },
        created() {
           
           
       
        },
        mounted() {
            var _this = this
            if(this.limit>1 && this.images.length<=0){
                console.log('走这里1')
              
            }
            if(this.images.length>=1){
               var bbss = JSON.parse(JSON.stringify(this.images))
               var newbbss = []
               bbss.forEach(function(val,index){
                   var item = {}
                   item.x = 0;
                   item.y = 0;
                   item.oldx = 0;
                   item.oldy = 0;
                   item.zIndex = 1; // 层级
                   item.sort = index; // 排序
                   item.opacity = 1; // 透明
                   item.moveEnd = false; // 是否进入拖拽
                   item.url = val
                   newbbss.push(item)
               })
                            
               // this.value = newbbss
                    
               this.imgs = newbbss 
                   console.log(this.imgs)
            
            }
            setTimeout(function(){
                _this.showbbss = true
                console.log("showbbss",_this.showbbss)
            },300)
           
        },
        methods:{
            upload(res){
              
                var inputs = []
                res.forEach((item)=>{
                    inputs.push(item.url)
                })
                this.contents = inputs
                console.log('111',this.contents)
            }
        }
    }
</script>

<style lang="scss">
    .tips{
        font-size: 24rpx;
        text{
            color: #8f939c;
            margin-left: 10rpx;
        }
    }
    .imglist{
        margin-top: 10rpx;
      
        .imgItem{
            width: 120rpx;
            height: 120rpx;
            
            border: 1px solid #c7c9ce;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    
</style>